<template>
  <div class="chooser-component">
    <ul class="chooser-list">
        <!-- active是一个需要判断才会添加的类，当点击获取的nowIndex等于index时，会进行添加 -->
      <li
      v-for="(item, index) in banks"
      @click="chooseSelection(index)"
      :title="item.label"
      :class="[item.name, {active: index === nowIndex}]"
      :key="index"
      ></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowIndex: 0,
      banks: [
        {
          id: 201,
          label: "招商银行",
          name: "zhaoshang"
        },
        {
          id: 301,
          label: "中国建设银行",
          name: "jianshe"
        },
        {
          id: 601,
          label: "浦发银行",
          name: "pufa"
        },
        {
          id: 1101,
          label: "交通银行",
          name: "jiaotong"
        },
        {
          id: 101,
          label: "中国工商银行",
          name: "gongshang"
        },
        {
          id: 401,
          label: "中国农业银行",
          name: "nongye"
        },
        {
          id: 1201,
          label: "中国银行",
          name: "zhongguo"
        },
        {
          id: 501,
          label: "中信银行",
          name: "zhongxin"
        },
        {
          id: 11,
          label: "微信支付",
          name: "weixin"
        }
      ]
    };
  },
  methods: {
    /* index是当前被选中元素的index值，将nowIndex赋值为index */
    chooseSelection(index) {
      this.nowIndex = index;
      this.$emit("on-change", this.banks[index]);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chooser-component {
  position: relative;
  display: inline-block;
}
.chooser-list li.active {
  border: 1px solid #4fc08d;
}
.chooser-list li {
  display: inline-block;
  width: 117px;
  height: 32px;
  background-image: url(../assets/banks/banks.png);
  background-repeat: no-repeat;
  margin: 5px;
  border: 1px solid #e3e3e3;
  cursor: pointer;
}
.zhaoshang {
  background-position: -2160px 0;
}
.jianshe {
  background-position: -720px 0;
}
.pufa {
  background-position: -1800px 0;
}
.jiaotong {
  background-position: -3120px 0;
}
.minsheng {
  background-position: -2760px 0;
}
.pingan {
  background-position: -2400px 0;
}
.beijing {
  background-position: -960px 0;
}
.xingye {
  background-position: 0 0;
}
.shanghai {
  background-position: -1560px 0;
}
.guangfa {
  background-position: -840px 0;
}
.gongshang {
  background-position: -2640px 0;
}
.nongye {
  background-position: -1680px 0;
}
.guangda {
  background-position: -2280px 0;
}
.zhongguo {
  background-position: -2520px 0;
}
.zhongxin {
  background-position: -480px 0;
}
.chuxu {
  background-position: -120px 0;
}
.bnongshang {
  background-position: -1440px 0;
}
.huaxia {
  background-position: -2040px 0;
}
.snongshang {
  background-position: -2880px 0;
}

.baifubao {
  background-position: -1320px 0;
}
.weixin {
  background-position: -3360px 0;
}
</style>
